import React, { useEffect, useState } from 'react';
import { Tooltip } from 'antd';
import moment from 'moment';
import BizIcon from '@/components/BizIcon';
import events from '@/utils/eventBus';
import styles from './index.less';

/**
 * @description: 渲染表单本地缓存状态提示组件
 * @param {*}
 * @return {*}
 */
const FormStorageStatus = ({ status, isFirstTimeToPage, saveTime }) => {
    const TEXT_MAP = {
        1: '最近保存：刚刚',
        2: '保存中',
        3: `最近保存：${moment(saveTime).format('HH:mm')}`,
        4: `上次保存：${moment(saveTime).format('YYYY-MM-DD HH:mm')}`
    };
    const [text, setText] = useState(TEXT_MAP[1]);
    useEffect(() => {
        setText(TEXT_MAP[status]);
    }, [TEXT_MAP, status]);
    const onClose = () => {
        events.emit('closeTooltip');
    };

    return (
        <div className={styles.status}>
            <Tooltip
                title={
                    <div className={styles.tooltipContent}>
                        <p>自动保存功能上线啦</p>
                        <p>所有修改将自动保存</p>
                        <div onClick={onClose}>我知道了</div>
                    </div>
                }
                visible={isFirstTimeToPage}
                placement="topLeft"
                overlayClassName={styles.tooltipCls}
            >
                <div>
                    {status === 2 ? (
                        <i className={styles.saving} />
                    ) : (
                        <BizIcon className={styles.saved} type="shangchuanchenggong" />
                    )}
                    <span>{text}</span>
                </div>
            </Tooltip>
        </div>
    );
};

export default FormStorageStatus;
